<template>
  <div class="content">
    <van-button @click="showPicker = true">启动！</van-button>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
        title="选择目标和使用牌"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        :visible-option-num="8"
      />
    </van-popup>
    <span class="check" v-if="source.length > 0" @click="showCover = !showCover"
      >点击{{ showCover ? "查看" : "隐藏" }}</span
    >
    <p
      class="term"
      v-for="(item, index) in source"
      :key="index"
    >
      <span>{{ item }}</span>
      <span>{{ target[index] }}</span>
      <span>{{ cards[index] }}</span>
      <span @click.stop="remove(index)">删除</span>
      <div v-if="showCover" class="cover"></div>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const showPicker = ref<boolean>(false);
const showCover = ref<boolean>(false);
const columns = [
  [
    { text: "来源：一号", value: "来源：一号" },
    { text: "来源：二号", value: "来源：二号" },
    { text: "来源：三号", value: "来源：三号" },
    { text: "来源：四号", value: "来源：四号" },
    { text: "来源：五号", value: "来源：五号" },
    { text: "来源：六号", value: "来源：六号" },
    { text: "来源：七号", value: "来源：七号" },
    { text: "来源：八号", value: "来源：八号" },
  ],
  // 第二列
  [
    { text: "目标：一号", value: "目标：一号" },
    { text: "目标：二号", value: "目标：二号" },
    { text: "目标：三号", value: "目标：三号" },
    { text: "目标：四号", value: "目标：四号" },
    { text: "目标：五号", value: "目标：五号" },
    { text: "目标：六号", value: "目标：六号" },
    { text: "目标：七号", value: "目标：七号" },
    { text: "目标：八号", value: "目标：八号" },
  ],
  [
    { text: "杀", value: "杀" },
    { text: "闪", value: "闪" },
    { text: "桃", value: "桃" },
    { text: "酒", value: "酒" },
    { text: "装备", value: "装备" },
    { text: "乐不思蜀", value: "乐不思蜀" },
    { text: "兵粮寸断", value:"兵粮寸断" },
    { text: "闪电", value:"闪电" },
    { text: "顺手牵羊", value: "顺手牵羊" },
    { text: "过河拆桥", value: "过河拆桥" },
    { text: "决斗", value: "决斗" },
    { text: "火攻", value: "火攻" },
    { text: "铁索连环", value: "铁索连环" },
    { text: "借刀杀人", value: "借刀杀人" },
    { text: "万箭齐发", value: "万箭齐发" },
    { text: "南蛮入侵", value: "南蛮入侵" },
    { text: "无懈可击", value: "无懈可击" },
    { text: "无中生有", value: "无中生有" },
    { text: "五谷丰登", value: "五谷丰登" },
    { text: "桃园结义", value: "桃园结义" },
  ],
];
const source = ref<string[]>([]);
const target = ref<string[]>([]);
const cards = ref<string[]>([]);

const onConfirm = (data: any): void => {
  source.value.push(data.selectedValues[0]);
  target.value.push(data.selectedValues[1]);
  cards.value.push(data.selectedValues[2]);
  showPicker.value = false;
};

const remove = (index: number): void => {
  source.value.splice(index, 1);
  target.value.splice(index, 1);
  cards.value.splice(index, 1);
};
</script>

<style scoped lang="scss">
.content {
  height: 60vh;
  overflow: auto;
  .van-button {
    width: 100%;
    border: 2rem solid #999;
    border-radius: 10rem;
  }
  .check {
    display: inline-block;
    border: 2rem solid #999;
    padding: 10rem;
    border-radius: 10rem;
    margin: 10rem 0;
  }
  .term {
    position: relative;
    border: 2rem solid #999;
    border-radius: 10rem;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    transition: all 0.6s linear;
    span {
      background-color: #bf9d5e;
      color: #fff;
      padding: 10rem;
      margin: 10rem;
      border-radius: 10rem;
      &:nth-child(2) {
        margin-right: 80rem;
      }
      &:nth-child(3) {
        width: 170rem;
        text-align: center;
      }
      &:nth-child(4) {
        background-color: #ad2727;
      }
    }
    .cover {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 10rem;
    backdrop-filter: blur(40rem);
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.5));
    box-shadow: 0 20rem 40rem 1rem rgba(0, 0, 0, 0.12);
  }
  }
}
</style>
